Lướt web thấy cái widget nhận xét mới nhất cho Blogspot này khá đẹp nên chia sẻ cho các bạn. Các bạn nên thêm widget này vào website để tiện việc theo dõi người khác đã nhận xét bài viết để chúng ta kịp trả lời. Đây cũng là 1 cách tối ưu SEO, giúp khả năng tương tác của người dùng đối với website của chúng ta.
 |
| Widget nhận xét mới nhất cho Blogspot |
Một tiện ích Blogger chỉ tốt nếu nó tải nhanh và làm cho cái nhìn giao diện người dùng tốt hơn. Đây là những gì chúng tôi giữ trong tâm trí trong khi phát triển các widget này mà kéo ý kiến gần đây từ thức ăn blog của bạn một cách không đồng bộ mà không có nhiều ảnh hưởng tốc độ blog của tải.
Sau đây là các tính năng của nó:
- Mã hóa trong JavaScript bằng cách sử dụng API nguồn cấp dữ liệu JSON Blogger
- Hiển thị tác giả hồ sơ hình ảnh thu nhỏ - tác giả Avatar
- Đại diện tác giả liên kết đến hồ sơ Google + của nó
- Hoạt hình hình ảnh preloader
- Cho thấy đăng tiêu đề
- Chương trình bình luận ngày
- Bình luận cho thấy đoạn trích (đoạn mô tả ngắn gọn)
- Đọc thêm liên kết
- Trọng lượng nhẹ
- Chất lỏng và đáp ứng
- Sử dụng chú thích để hiển thị thông tin
Hiển thị preloader GIF sau đó quay và xung nhịp khi tải widget hoặc khi dữ liệu được yêu cầu của trình duyệt từ cấp dữ liệu JSON.
Khi được nạp đầy đủ các ý kiến được hiển thị theo thứ tự giảm dần ( mới nhất ở trên ). Khi người dùng di con trỏ chuột vào tên bình luận, một tooltip sẽ hiển thị thông tin về ngày bình và thời gian.
Di con trỏ chuột vào biểu tượng thư mục sẽ hiển thị tiêu đề bài viết có nhận xét được đăng:
Hiển thị nhận xét gần đây Với Thumbnail Trong Blogger
Đọc thêm widget tải nhanh mát này vào blog của bạn để hiển thị bình luận gần đây của người đọc blog của bạn? Cho phép nhận thẳng vào làm việc sau đó!
1 Vào Blogger> Template
2 Sao lưu mẫu của bạn
3 Nhấp vào Chỉnh sửa HTML
4 Dán đoạn mã sau ngay trên
</ head>
Lưu ý: Bước này là tùy chọn. Bỏ qua nó nếu bạn đã thêm jQuery liên kết nguồn thư viện mẫu blogger của bạn.
<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
Tiếp theo dán các liên kết sau đây stylesheet cho
FontAwesome và Font Osald ngay trên
</ head>. Bỏ thêm các liên kết nếu bạn đã có thêm chúng vào trong các mẫu của bạn:
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
Bây giờ dán mã CSS sau ngay trên
]]> </ b: skin>
/*############Recent Comments Widget##################*/
.mbtcmts{list-style-type:none; overflow:hidden; }
.mbtcmts li {margin:0px auto 20px auto; clear:both; color:#666; font-family:helvetica; font-size:12px;padding:0px;}
.mbtcmts i{color:#999; padding-right:4px;}
.mbtcmts .idate {display:block; font-family:arial; font-size:11px;text-align: left;padding:3px; margin:0 0 0px 40px}
.mbtcmts .icontent{ display:block; font-family:Georgia; color:#999; font-style:italic; line-height:1.5em;}
.mbtcmts .icontent a {color:#999; text-decoration:none; font-weight: bold;font-size: 16px;font-style: normal;}
.mbtcmts div{line-height:2em; clear:both; border-top:1px solid #eee; margin-top:5px;}
.mbtcmts span { margin:5px 0px 0px; padding-right:5px;}
.mbtcmts img {border-radius:100%; float:left; margin:0px 20px 20px 0px; border:1px solid #eee; padding:3px; width:50px; height:50px;box-shadow: 2px 2px 4px #ddd; }
.mbtcmts .icapital {text-transform:Capitalize; display:inline-block;}
.mbtcmts .ititle {font-family:oswald; font-size:14px; color:orange; font-weight:normal; text-decoration:none;}
.mbtcmts .ititle:hover {color:#666;}
.mbtcmts .idate:before, .mbtcmts .ipostTitle a:before{font-family:fontAwesome; position:relative; padding-right:5px;}
.mbtcmts .idate:before {content:'\f017'; color:#999}
.mbtcmts .ipostTitle a {text-decoration:none; color:#999}
.mbtcmts .ipostTitle a:before {content:'\f07c'; }
#mbtloading{
margin: 20% auto;background: url('http://downloads.mybloggertricks.com/Spin%20and%20pulsate.gif') no-repeat left center;width: 80px;height: 80px;}
/*------ CSS3 Tooltip Shortcode -------------*/
.tooltip{outline:none;text-decoration:none!important;position:relative}.tooltip:hover {border-bottom: none;}.tooltip strong{line-height:30px}.tooltip > span{text-transform:capitalize;width:150px; padding:5px 5px;opacity:0;top:120%;left:0px; visibility:hidden;z-index:10;position:absolute;font-family:helvetica;font-size:12px;font-weight:bold;border-radius:2px;box-shadow:2px 2px 5px #999;-webkit-transition-property:opacity,margin-top,visibility,margin-left;-webkit-transition-duration:0.4s,0.3s,0.4s,.3s;-webkit-transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out;transition-property:opacity,margin-top,visibility,margin-left;transition-duration:0.4s,0.3s,0.4s,.3s;transition-timing-function:ease-in-out,ease-in-out,ease-in-out,ease-in-out}.tooltip > span img{float:right;width:110px;margin:0 0 30px 10px;padding: 0;border: none;}.tooltip:hover > span{opacity:1;text-decoration:none;visibility:visible;overflow:visible;display:inline;margin-left:-50px}.tooltip span b{width:15px;height:15px;left:30%;top:-9px;display:block;position:absolute;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);display:none\0/;*display:none}.tooltip > span{padding-top:10px;color:#fff;background:orange;border:1px solid #ffffff}.tooltip span b{background:orange;border-top:1px solid #ffffff;border-right:1px solid #ffffff}.mbtcmts .itotal {color:#333; padding:3px 3px 3px 10px; border:1px solid #eee; font-family:arial; font-size:12px;}
.mbtcmts .itotal i {font-style:normal;}
.mbtcmts .itotal span{font-family:oswald; font-weight:normal; color:#333; text-decoration:none}
.mbtcmts .itotal span:before {font-family:FontAwesome; position:relative; content:'\f075'; }
Để thay thế các chủ đề màu
orange của các widget, thay thế màu vàng nổi bật khu vực với một màu của sự lựa chọn của bạn. Bạn cũng có thể thay thế chúng với mã màu thập lục phân.
7 Lưu mẫu của bạn và bạn gần như được hoàn tất!
8 Cuối cùng đi đến Layout và nhấp vào " Thêm tiện ích ".
9 Chọn HTML / Javascript widget và dán đoạn mã sau bên trong nó:
<div id="mbtloading" ></div>
<script type="text/javascript">
function mbtcmts(json) {
document.write('<ul class="mbtcmts">');
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListDate = TotalPosts = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListProfile = ListComments = thumbUrl = sk = ListMonth = Y = D = M = m = "";
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
if(json.feed.entry[i].link[2] != null)
{
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
}
else
{ListUrl = "'#'"}
//####################### Splitting URL into Title
if(json.feed.entry[i].link[2] != null)
{
var mbt_slit = json.feed.entry[i].link[j].href;
var M_slit = mbt_slit.split("#");
M_slit = M_slit [0];
var K_slit = M_slit.split("?");
K_slit = K_slit[0];
var B_slit = K_slit.split("/");
B_slit = B_slit[5];
B_slit = B_slit.split(".html");
B_slit = B_slit [0];
var T_slit= B_slit.replace(/-/g, " ").charAt(0).toUpperCase()+ B_slit.replace(/-/g, " ").slice(1).substring(0, 50);
var Link_slit= T_slit.link(K_slit);
}
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
ListAuthor= json.feed.entry[i].author[0].name.$t;
var ListAuth = ListAuthor.split(" ");
var ListAuth = ListAuth.slice(0, 1).join(" ");
ListProfile= "'" + json.feed.entry[i].author[0].uri.$t + "'";
//################### Content Check
ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0, 10);
Y = ListDate.substring(0, 4);
m = ListDate.substring(5, 7);
D = ListDate.substring(8, 10);
M = ListMonth[parseInt(m - 1)];
//################### Thumbnail Check
if (json.feed.entry[i].author)
{
thumbUrl = json.feed.entry[i].author[0].gd$image.src;
sk= thumbUrl.replace("/s72-c/","/s60-c/");
ListImage= "'" + sk + "'";
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiduPp6bkNY71NtZ4qFDI_G64ouoa8Hi-L0r_CvHPeBN_0zK6d90D7RicEyUadtLxNnDJLNoxBZbdfOvhg49Eq3TB9pZvIR7lnce2D_ZwkqN19tHL-RO7pink-kWEAc1JqaMhgWcM6otco/s200/Icon.png'";
}
//################### Printing List
var listing = "<li class='node"+[i]+"' ><a rel='nofollow' href="
+ListProfile+
"><img src="
+ListImage+
"/></a><a class='ititle tooltip' href="
+ListUrl +
"target='_blank'><span><b></b>"
+ListAuth+
" Commented on » "
+ M +
" "
+ D +
", "
+ Y +
"</span>"
+ ListAuthor+
"</a> <i> posted in</i> <span class='ipostTitle'><a class='tooltip' href='"
+K_slit+
"'><span><b></b>"
+T_slit+
"</span></a></span><span class='icontent'>" + ListContent+" ... <a href="+ListUrl+"> » </a></span><div></div></li>";
document.write(listing);
}
document.write('<div class="itotal"> <span> '+TotalPosts+' </span><i>delicious comments posted so far!</i></div></ul>');
}
</script>
<script>
var ListCount = 5;
var ChrCount = 90;
</script>
<script src="http://www.mybloggertricks.com/feeds/comments/default?alt=json-in-script&callback=mbtcmts"></script>
<script>document.getElementById("mbtloading").style.display = "none";</script>
Bạn có thể làm cho những thay đổi này:
Thay
http://www.mybloggertricks.com này với URL blog của bạn
Để tăng hoặc giảm số lượng các ý kiến, chỉnh sửa:
ListCount = 5
Để quyết định có bao nhiêu ký tự để hiển thị như tóm tắt bình luận (trích đoạn) sửa:
ChrCount = 90
10 Lưu widget của bạn và xem sự kỳ diệu trong hành động! =)
